<template>
  <view class="main-box">
    <view class="img-container">
      <image class="topImg" src="/static/images/bgc_01.png"></image>
    </view>
    <view class="edit-box">
      <view class="my-date">
        <view class="my-date-input" style="background:#05163e">
          <view>{{ valueTime }}</view>
          <view style="margin-left:15rpx">星期{{ weekArray[new Date(valueTime).getDay()] }}</view>
        </view>
      </view>
      <view style="margin: 0 30rpx;">
        <view class="my-uni-form">
          <view>
            <input
              v-model="form.content1"
              @blur="setCache('content1', form.content1)"
              class="uni-input"
              placeholder="工作一 最多输入120个字"          
              placeholder-style="color:#DBDBDB;"
              maxlength="120"
              type="text"
            />
         <!--    <textarea
              v-model="form.describe1"
              @blur="setCache('describe1', form.describe1)"
              class="uni-textarea"
            /> -->
            <cmpVideo
              :fileList="fileList"
              @changeComponentData="changeComponentData"
            />
          </view>
          <view>
            <input
              v-model="form.content2"
              @blur="setCache('content2', form.content2)"
              class="uni-input"
              placeholder-style="color:#DBDBDB;"
              placeholder="工作二 最多输入120个字"
              maxlength="120"
              type="text"
            />
         <!--    <textarea
              v-model="form.describe2"
              @blur="setCache('describe2', form.describe2)"
              class="uni-textarea"
            /> -->
            <cmpVideo
              :fileList="fileList1"
              @changeComponentData="changeComponent1Data"
            />
          </view>
          <view style="margin-bottom: 140rpx">
            <input
              v-model="form.content3"
              @blur="setCache('content3', form.content3)"
              placeholder-style="color:#DBDBDB;"
              class="uni-input"
              placeholder="工作三 最多输入120个字"
              maxlength="120"
              type="text"
            />
         <!--    <textarea
              v-model="form.describe3"
              @blur="setCache('describe3', form.describe3)"
              class="uni-textarea"
            /> -->
            <cmpVideo
              :fileList="fileList2"
              @changeComponentData="changeComponent2Data"
            />
          </view>
        </view>
        <u-datetime-picker
          :show="timeShow"
          @cancel="timeCancel"
          @confirm="timeConfirm"
          v-model="value1"
          mode="date"
        ></u-datetime-picker>
        <u-modal :show="show" width="690rpx" :showConfirmButton="false">
          <cmpDialog
            v-if="btnStatus === 2"
            @handleClose="handleClose"
            @submitForm="submitDocumentForm"
            :dialogData="dialogForwardDocumentData"
          />
          <cmpDialog
            v-if="btnStatus === 1"
            @handleClose="handleClose"
            @submitForm="submitOwnForm"
            :dialogData="dialogOwnData"
          />
        </u-modal>
      </view>
      <!-- v-if="selectUserObj.status != '1'" -->
      <view class="submit-form">
        <u-button
          @click="submit "
          :customStyle="{
            boxShadow: 'none !important',
            width: '40%',
            borderRadius: '10rpx',
            color: '#FFFFFF',
            border: '1px solid #0C347E',
            background: '#0C347E',
          }"
          >提交</u-button
        >
        <!-- <u-button
          @click="
            () => {
              btnStatus = 2
              show = true
            }
          "
          :customStyle="{
            boxShadow: 'none !important',
            width: '40%',
            borderRadius: '10Rpx',
            color: '#0C347E',
            border: '1px solid #0C347E',
            background: '#F5F5F5',
          }"
          >转发文书</u-button
        > -->
      </view>
    </view>
  </view>
</template>
<script>
import cmpDialog from '../../../components/cmp-dialog.vue'
import cmpVideo from '../../../components/cmp-video.vue'
import {
  setDailyWrite,
  setEditDaily,
  setMessageData,
} from '@/service/services.js'
import { mapState } from 'vuex'
import moment from 'moment'
export default {
  data() {
    return {
      btnStatus: 1,
      show: false,
      weekArray: ['日', '一', '二', '三', '四', '五', '六'],
      imageValue: [],
      userList: [],
      valueTime: moment(new Date()).format('YYYY-MM-DD'),
      timeShow: false,
      pupDocumentShow: false,
      selectShow: false,
      selectUserObj: {},
      pupOwnShow: false,
      selectValue: '请选择',
      value: '',
      value1: moment(new Date()).format('YYYY-MM-DD'),
      dialogOwnData: {
        title: '是否对修改内容进行提交？',
        btn: {
          ok: '提交',
          close: '暂不',
        },
      },
      dialogOwnData: {
        title: '是否对编辑内容进行提交？',
        src: '../../../static/images/submint.png',
        btn: {
          ok: '提交',
          close: '暂不',
        },
      },
      dialogForwardDocumentData: {
        title: '是否将文件转发给文书？',
        src: '../../../static/images/submint.png',
        btn: {
          ok: '转发',
          close: '暂不',
        },
      },
      fileList: [],
      fileList1: [],
      fileList2: [],
      form: {
        content1: '',
        file1: '',
        content2: '',
        file2: '',
        content3: '',
        file3: '',
        describe1: '',
        describe2: '',
        describe3: '',
      },
      value: '',
      writeDailyData: {
        title: '写日报',
        info: '编辑当日日报',
        count: 200,
      },
      editDailyData: {
        title: '改日报',
        info: '修改文书提交日报',
        count: 4,
      },
    }
  },
  computed: mapState({
    userInfo(item) {
      return item.userInfo
    },
  }),
  onLoad() {
    wx.setVisualEffectOnCapture({
      visualEffect: 'hidden',
    })
  },
  onShow() {
    uni.getStorage({
      key: 'describe1',
      success: (res) => {
        this.form.describe1 = res.data
      },
    })
    uni.getStorage({
      key: 'describe2',
      success: (res) => {
        this.form.describe2 = res.data
      },
    })
    uni.getStorage({
      key: 'describe3',
      success: (res) => {
        this.form.describe3 = res.data
      },
    })
    uni.getStorage({
      key: 'content1',
      success: (res) => {
        this.form.content1 = res.data
      },
    })
    uni.getStorage({
      key: 'content2',
      success: (res) => {
        this.form.content2 = res.data
      },
    })
    uni.getStorage({
      key: 'content3',
      success: (res) => {
        this.form.content3 = res.data
      },
    })
    uni.getStorage({
      key: 'fileList',
      success: (res) => {
        this.fileList = res.data
      },
    })
    uni.getStorage({
      key: 'fileList1',
      success: (res) => {
        this.fileList1 = res.data
      },
    })
    uni.getStorage({
      key: 'fileList2',
      success: (res) => {
        this.fileList2 = res.data
      },
    })
  },
  methods: {
    deleteEndPunctuation(str){
       for(let i=1;i<str.length;i++){
          let lastIndex=  str.charAt(str.length-i) 
          let flag =  lastIndex.replace(/(.*)(，|。|、|！|；|,|;|!)/g ,"") 
            if(flag){       
            return  str.slice(0,str.length-i+1)   
            }
        }
      },
      submit(){          
         if (!this.form.content1){
                  uni.showToast({
                      title: '工作一内容不能为空',
                      type: 'default',                   
                      icon: 'none',
                      position: 'center',
                      mask: true,
                      duration: 2000,
                 })
                return
         }  
             this.btnStatus = 1
              this.show = true          
    },
    setCache(key, content) {
      uni.setStorage({
        key: key,
        data: content,
      })
    },
    changeComponentData(data) {
      this.fileList = data
      this.setCache('fileList', data)
    },
    changeComponent1Data(data) {
      this.fileList1 = data
      this.setCache('fileList1', data)
    },
    changeComponent2Data(data) {
      this.fileList2 = data
      this.setCache('fileList2', data)
    },
    changeTimeDate(timeData) {
      return moment(timeData).format('YYYY-MM-DD')
    },
    // submitDocumentForm() {
    //   if (this.fileList.length > 0) {
    //     this.form.file1 = ''
    //     this.fileList.forEach((item) => {
    //       this.form.file1 += item.fileUrl + ';'
    //     })
    //   }
    //   if (this.fileList1.length > 0) {
    //     this.form.file2 = ''
    //     this.fileList1.forEach((item) => {
    //       this.form.file2 += item.fileUrl + ';'
    //     })
    //   }
    //   if (this.fileList2.length > 0) {
    //     this.form.file3 = ''
    //     this.fileList2.forEach((item) => {
    //       this.form.file3 += item.fileUrl + ';'
    //     })
    //   }
    //   setDailyWrite({
    //     content1: this.form.content1,
    //     file1: this.form.file1,
    //     content2: this.form.content2,
    //     file2: this.form.file2,
    //     content3: this.form.content3,
    //     file3: this.form.file3,
    //     createBy: this.userInfo.userId,
    //     leaderid: this.userInfo.userId,
    //     describe1: this.form.describe1,
    //     describe2: this.form.describe2,
    //     describe3: this.form.describe3,
    //     flag: 1,
    //     status: 1,
    //     clerkid: this.userInfo.userId,
    //   })
    //     .then((res) => {
    //       setMessageData({
    //         type: 3,
    //         leaderid: this.userInfo.userId,
    //       })
    //       uni.removeStorage({ key: 'fileList_' + this.selectUserObj.id })
    //       uni.removeStorage({ key: 'fileList1_' + this.selectUserObj.id })
    //       uni.removeStorage({ key: 'fileList2_' + this.selectUserObj.id })
    //       uni.removeStorage({ key: 'content1_' + this.selectUserObj.id })
    //       uni.removeStorage({ key: 'content2_' + this.selectUserObj.id })
    //       uni.removeStorage({ key: 'content3_' + this.selectUserObj.id })
    //       uni.removeStorage({ key: 'describe1_' + this.selectUserObj.id })
    //       uni.removeStorage({ key: 'describe2_' + this.selectUserObj.id })
    //       uni.removeStorage({ key: 'describe3_' + this.selectUserObj.id })
    //       uni.showToast({
    //         title: '已转交文书',
    //         type: 'default',
    //         position: 'bottom',
    //         icon: 'none',
    //         position: 'center',
    //         mask: true,
    //         duration: 3000,
    //       })
    //       uni.switchTab({
    //         url: '/pages/leader-daily/daily-edit-home/index',
    //       })
    //       this.show = false
    //     })
    //     .catch(() => {
    //       this.show = false
    //     })
    // },
    handleForward() {
      this.pupDocumentShow = true
    },
    timeCancel() {
      this.timeShow = false
    },
    timeConfirm(e) {
      this.valueTime = this.changeTimeDate(e.value)
      this.timeShow = false
    },
    handleOtherSelectClose() {
      this.selectShow = false
    },
    handleOtherSelectSubmit(e) {
      this.selectShow = false
      this.selectValue = e.value[0].label
      this.selectUserObj = {
        status: e.value[0].status,
        label: e.value[0].label,
        id: e.value[0].id,
      }
    },
    change() {
      this.timeShow = true
    },
    handleSelect() {
      this.selectShow = true
    },
    handleClose() {
      this.show = false
    },
    submitOwnForm() {    //最后的提交
      this.form.file1 = ''
      this.form.file2 = ''
      this.form.file3 = ''
      //去掉文本输入最后一个标点符号
        if(this.form.content1){
          this.form.content1 = this.deleteEndPunctuation(this.form.content1)
       }
      if(this.form.content2){
         this.form.content2 =this.deleteEndPunctuation(this.form.content2)
       }
      if(this.form.content3){
          this.form.content3 =this.deleteEndPunctuation(this.form.content3)
       }
      if (this.fileList.length > 0) {
        this.fileList.forEach((item) => {
          this.form.file1 += item.fileUrl + ';'
        })
      }
      if (this.fileList1.length > 0) {
        this.fileList1.forEach((item) => {
          this.form.file2 += item.fileUrl + ';'
        })
      }
      if (this.fileList2.length > 0) {
        this.fileList2.forEach((item) => {
          this.form.file3 += item.fileUrl + ';'
        })
      }
      setDailyWrite({
        content1: this.form.content1,
        file1: this.form.file1,
        content2: this.form.content2,
        file2: this.form.file2,
        content3: this.form.content3,
        file3: this.form.file3,
        createBy: this.userInfo.userId,
        leaderid: this.userInfo.userId,
        describe1: this.form.describe1,
        describe2: this.form.describe2,
        describe3: this.form.describe3,
        status: 0,
      })
        .then((res) => {      
          uni.removeStorage({ key: 'fileList_' + this.selectUserObj.id })
          uni.removeStorage({ key: 'fileList1_' + this.selectUserObj.id })
          uni.removeStorage({ key: 'fileList2_' + this.selectUserObj.id })
          uni.removeStorage({ key: 'content1_' + this.selectUserObj.id })
          uni.removeStorage({ key: 'content2_' + this.selectUserObj.id })
          uni.removeStorage({ key: 'content3_' + this.selectUserObj.id })
          uni.removeStorage({ key: 'describe1_' + this.selectUserObj.id })
          uni.removeStorage({ key: 'describe2_' + this.selectUserObj.id })
          uni.removeStorage({ key: 'describe3_' + this.selectUserObj.id })
          setMessageData({
            type: 1,
            leaderid: this.userInfo.userId,
          })
          uni.showToast({
            title: '今日已提交',
            type: 'default',
            position: 'bottom',
            icon: 'none',
            position: 'center',
            mask: true,
            duration: 3000,
          })
          this.show = false
          setTimeout(() => {
            uni.switchTab({
              url: '/pages/leader-daily/daily-edit-home/index',
            })
          }, 3000)
        })
        .catch(() => {
          this.show = false
        })
    },
  },
  components: {
    cmpDialog,
    cmpVideo,
  },
}
</script>

<style lang="scss" scoped>
.my-date {
  display: flex;
  align-items: center;
  padding-left: 30rpx;
  position: relative;
  height: 90rpx;
  background: #05163E;
  box-shadow: 0px 3rpx 2rpx 0px hsl(219, 100%, 89%);
  border-radius: 10rpx 10rpx 0px 0px;
  justify-content: space-between;
  .my-date-select {
    text-align: end;
    margin-right: 30rpx;
    width: 50%;
    // color: #c7dbff !important;
  }
}

.edit-box {
  flex: 1;
  margin: 30rpx;
  background: #fff;
  z-index: 2;
  box-sizing: border-box;
  background: #fff;
  border-radius: 10rpx 10rpx 10rpx 10rpx;
  position: relative;
}
.main-box {
  width: 100%;
  display: flex;
  flex-direction: column;
  position: absolute;
  background-color:#f5f9ff;
}
.img-container {
  position: fixed;
  width: 100%;
}
.topImg {
  width: 100%;
}
.containerBody {
  .content {
    display: flex;
    flex: 1;
    justify-content: space-between;
    position: relative;
  }
  .warning-time {
    height: 100rpx;
    text-align: center;
    font-size: 24rpx;
    font-weight: 400;
    color: #606c81;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }
  .time {
    font-size: 48rpx;
    font-weight: bold;
    color: #14bfb1;
    margin: 0px 8rpx;
  }
  position: relative;
  flex: 1;
  margin: -60rpx 24rpx 24rpx 24rpx;
  box-sizing: border-box;
  border: 2rpx solid #ddd;
  z-index: 2;
  box-shadow: 0px 6rpx 6rpx 0rpx #c5adae;
  border-radius: 20rpx;
  background: #fff;
}
.bottomImg {
  height: 126rpx;
  border-radius: 10rpx;
  position: absolute;
  bottom: -6rpx;
  width: 100%;
}
.submit-form {
  bottom: 30rpx;
  display: flex;
  width: 100%;
  position: absolute;
}
</style>
